<template>
  <el-card class="container" body-style="width:100%;height:100%;padding:0px;">
    <el-row class="tree-body">
      <el-tree class="tree"
               :data="data"
               :expand-on-click-node="false"
               :props="defaultProps"
               @node-click="handleNodeClick">
        <template #default="{ node, data }">
          <span v-if="data.icon!=null && data.icon.length>0" class="iconfont f16 m-r-5" :class="[data.icon]" />{{data.title}}
        </template>
        <template #empty>
          <el-empty :image-size="60" description="无数据" />
        </template>
      </el-tree>
    </el-row>
  </el-card>
</template>

<script lang="ts" setup>
import {defineEmits, inject, onMounted, ref, defineExpose} from "vue"

const $api = inject('$api')
const $post = inject('$post')
const emit = defineEmits(['selectTrees'])
const data = ref([])

const defaultProps = {
  children: 'children',
  label: 'title',
}

onMounted(()=>{
  getData()
})

function getData(){
  $post($api.menuTree).then((res:any)=>{
    data.value = res.data.result.menus
  })
}

function handleNodeClick(data: any,treeNode: any){
  emit("selectTrees",treeNode)
}

//刷新数据
function refData(){
  getData()
}

//外面可访问的
defineExpose({
  refData,
})
</script>

<style lang="scss" scoped>
.container{
  width: 100%;
  height: 100%;

  margin-right: 15px;

  .tree-body{
    width: 100%;
    height: 100%;
    padding: 15px;

    overflow: auto;

    display: flex;
  }

  .tree{
    flex: 1;
  }
}
</style>
